<template>
  <div id="app">
    <router-view :key="$route.fullPath" />
  </div>
</template>

<script setup lang="ts">
// 移除了加载动画以提升性能
</script>

<style lang="scss">
html,
body {
  margin: 0;
  padding: 0;
  height: 100%;
  width: 100%;
  font-family: 'Helvetica Neue', Helvetica, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  background-color: #0f1327;
  overflow: hidden; /* 删除auto，防止全局滚动条 */
}

#app {
  height: 100%;
  width: 100%;
  color: #e6e6e6;
}

// Custom scrollbar
::-webkit-scrollbar {
  width: 7px;
  height: 7px;
}

::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.1);
  border-radius: 5px;
}

::-webkit-scrollbar-thumb {
  background: rgba(77, 138, 240, 0.5);
  border-radius: 5px;
}

::-webkit-scrollbar-thumb:hover {
  background: rgba(77, 138, 240, 0.8);
}

// Overriding some ElementUI styles for dark theme
.el-card {
  background-color: rgba(20, 29, 58, 0.7);
  border: 1px solid rgba(77, 138, 240, 0.2);
  color: #e6e6e6;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
  backdrop-filter: blur(5px);
}

// 表单输入框样式 - 选择框样式已移除，由各页面自定义
.el-input__inner,
.el-textarea__inner {
  background-color: rgba(6, 14, 36, 0.9) !important;
  border-color: rgba(0, 234, 255, 0.4) !important;
  color: #e6e6e6 !important;
  box-shadow: 0 0 5px rgba(0, 234, 255, 0.2) inset;
}

.el-input__inner:focus,
.el-textarea__inner:focus {
  border-color: #00eaff !important;
  box-shadow: 0 0 10px rgba(13, 21, 43, 0.8), 0 0 5px rgba(0, 234, 255, 0.4) inset !important;
}

.el-input__icon,
.el-input__prefix,
.el-input__suffix {
  color: #00eaff !important;
}

// 下拉菜单样式 - 选择框下拉菜单样式已移除，由各页面自定义
.el-dropdown-menu,
.el-cascader__dropdown,
.el-date-picker,
.el-time-panel,
.el-picker-panel {
  background-color: rgba(13, 21, 43, 0.95) !important;
  border: 1px solid rgba(0, 234, 255, 0.4) !important;
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.5) !important;
  backdrop-filter: blur(10px);
}

.el-dropdown-menu__item,
.el-cascader-node,
.el-date-table td,
.el-month-table td,
.el-year-table td {
  color: #e6e6e6 !important;
}

.el-dropdown-menu__item:not(.is-disabled):hover,
.el-cascader-node:not(.is-disabled):hover {
  background-color: rgba(77, 138, 240, 0.2) !important;
}

// 对话框样式
.el-dialog,
.el-message-box {
  background-color: rgba(20, 29, 58, 0.95) !important;
  border: 1px solid rgba(0, 234, 255, 0.4) !important;
  box-shadow: 0 0 30px rgba(0, 0, 0, 0.7) !important;
  backdrop-filter: blur(10px);
}

.el-dialog__title,
.el-message-box__title {
  color: #00eaff !important;
}

.el-dialog__body,
.el-message-box__message {
  color: #e6e6e6 !important;
}

// 按钮样式
.el-button--primary {
  background: linear-gradient(135deg, #3c8ce7 0%, #00eaff 100%);
  border-color: #3c8ce7;
  position: relative;
  z-index: 1;

  &:active, &:focus {
    /* 防止产生遮罩效果 */
    &::before {
      display: none !important;
    }
  }
}

.el-button {
  /* 确保按钮点击不会产生遮罩效果 */
  &:active, &:focus {
    outline: none !important;
    -webkit-tap-highlight-color: transparent !important;

    &::before, &::after {
      display: none !important;
    }
  }
}

/* 防止全局点击遮罩 */
body::after,
html::after,
.app-wrapper::after,
.main-container::after,
.content-container::after {
  display: none !important;
}

.el-table {
  background-color: rgba(20, 29, 58, 0.7) !important;
  color: #e6e6e6 !important;

  &::before {
    display: none;
  }

  &.el-table--border,
  .el-table__fixed-right::before,
  .el-table__fixed::before {
    background-color: rgba(77, 138, 240, 0.2) !important;
  }

  th {
    background-color: transparent !important;
    color: #00eaff !important;
    border-bottom: 1px solid rgba(77, 138, 240, 0.3) !important;
  }

  tr {
    background-color: transparent !important;

    &:hover>td {
      background-color: rgba(77, 138, 240, 0.1) !important;
    }
  }

  td,
  th.is-leaf {
    border-bottom: 1px solid rgba(77, 138, 240, 0.2) !important;
    background-color: transparent !important;
  }

  .el-table__empty-block {
    background-color: transparent !important;
  }

  .el-table__empty-text {
    color: #e6e6e6 !important;
  }
}

.el-pagination {
  color: #e6e6e6 !important;

  button,
  .btn-prev,
  .btn-next {
    background-color: rgba(20, 29, 58, 0.7) !important;
    color: #e6e6e6 !important;
  }

  .el-pager li {
    background-color: rgba(20, 29, 58, 0.7) !important;
    color: #e6e6e6 !important;

    &.active {
      color: #00eaff !important;
      border-color: #00eaff !important;
    }

    &:hover {
      color: #00eaff !important;
    }
  }
}

// Glowing tech effect classes
.glow-text {
  text-shadow: 0 0 10px rgba(0, 234, 255, 0.7);
}

.tech-border {
  position: relative;

  &::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border: 1px solid rgba(77, 138, 240, 0.3);
    border-radius: inherit;
    animation: borderGlow 3s infinite alternate;
    pointer-events: none;
  }
}

@keyframes borderGlow {
  0% {
    box-shadow: 0 0 5px rgba(13, 21, 43, 0.8), inset 0 0 5px rgba(13, 21, 43, 0.8);
  }

  100% {
    box-shadow: 0 0 15px rgba(0, 234, 255, 0.7), inset 0 0 10px rgba(0, 234, 255, 0.5);
  }
}

// Flowing light effect
.flow-light {
  position: relative;
  overflow: hidden;

  &::after {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: linear-gradient(to bottom right,
        rgba(255, 255, 255, 0) 0%,
        rgba(255, 255, 255, 0) 40%,
        rgba(255, 255, 255, 0.3) 50%,
        rgba(255, 255, 255, 0) 60%,
        rgba(255, 255, 255, 0) 100%);
    transform: rotate(45deg);
    animation: flowLight 8s ease-in-out infinite;
    pointer-events: none;
  }
}

@keyframes flowLight {
  0% {
    transform: translateX(-100%) translateY(-100%) rotate(45deg);
  }

  100% {
    transform: translateX(100%) translateY(100%) rotate(45deg);
  }
}

// 选项卡样式
.el-tabs__header {
  border-bottom: 1px solid rgba(77, 138, 240, 0.2) !important;
}

.el-tabs__item {
  color: #b0b0b0 !important;

  &.is-active {
    color: #00eaff !important;
  }

  &:hover {
    color: #e6e6e6 !important;
  }
}

.el-tabs__active-bar {
  background-color: #00eaff !important;
  box-shadow: 0 0 10px rgba(0, 234, 255, 0.5) !important;
}

.el-tabs__nav-wrap::after {
  background-color: rgba(77, 138, 240, 0.2) !important;
}

// 表单项样式
.el-form-item__label {
  color: #e6e6e6 !important;
}

.el-form-item__error {
  color: #ff4757 !important;
}

// 分割线
.el-divider {
  background-color: rgba(77, 138, 240, 0.2) !important;
}

.el-divider__text {
  background-color: transparent !important;
  color: #00eaff !important;
}

// 进度条样式
.el-progress-bar__outer {
  background-color: transparent !important;
}

.el-progress-bar__inner {
  background: linear-gradient(to right, #3c8ce7, #00eaff) !important;
}

// 消息提示样式
.el-message {
  background-color: rgba(20, 29, 58, 0.95) !important;
  border-color: rgba(0, 234, 255, 0.4) !important;
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.5) !important;
  color: #e6e6e6 !important;
  backdrop-filter: blur(10px);
}

// 加载样式
.el-loading-mask {
  background-color: rgba(13, 21, 43, 0.7) !important;
  backdrop-filter: blur(3px);
  z-index: 1000 !important;
  pointer-events: auto !important;
}

.el-loading-spinner .el-loading-text {
  color: #00eaff !important;
}

.el-loading-spinner .path {
  stroke: #00eaff !important;
}

/* 添加新规则确保按钮点击后不残留遮罩 */
.el-button:focus::after,
.el-button:active::after {
  display: none !important;
}

/* 确保加载遮罩在不需要时不可见 */
.el-loading-mask.is-fullscreen.el-loading-fade-leave-active,
.el-loading-mask.el-loading-fade-leave-active {
  opacity: 0 !important;
  pointer-events: none !important;
}

/* 确保弹出层正确关闭 */
.v-modal {
  background-color: rgba(0, 0, 0, 0.5) !important;
  z-index: 999 !important;
  pointer-events: auto !important;
  opacity: 1;
  transition: opacity 0.3s ease;
}

.v-modal[style*="display: none"] {
  opacity: 0 !important;
  pointer-events: none !important;
}

// 徽章样式
.el-badge__content {
  background-color: #00eaff !important;
  box-shadow: 0 0 10px rgba(0, 234, 255, 0.5) !important;
}

// 步骤条样式
.el-step__head.is-process {
  color: #00eaff !important;
  border-color: #00eaff !important;
}

.el-step__head.is-wait {
  color: rgba(77, 138, 240, 0.5) !important;
  border-color: rgba(77, 138, 240, 0.5) !important;
}

.el-step__head.is-success {
  color: #19e698 !important;
  border-color: #19e698 !important;
}

.el-step__title {
  color: #e6e6e6 !important;

  &.is-process {
    font-weight: bold !important;
    color: #00eaff !important;
  }

  &.is-wait {
    color: #b0b0b0 !important;
  }

  &.is-success {
    color: #19e698 !important;
  }
}

.el-step__line {
  background-color: rgba(77, 138, 240, 0.3) !important;
}

// 标记样式
.el-tag {
  background-color: rgba(20, 29, 58, 0.7) !important;
  border-color: rgba(0, 234, 255, 0.4) !important;
  color: #e6e6e6 !important;

  &.el-tag--success {
    background-color: rgba(25, 230, 152, 0.1) !important;
    border-color: rgba(25, 230, 152, 0.4) !important;
    color: #19e698 !important;
  }

  &.el-tag--warning {
    background-color: rgba(230, 162, 60, 0.1) !important;
    border-color: rgba(230, 162, 60, 0.4) !important;
    color: #e6a23c !important;
  }

  &.el-tag--danger {
    background-color: rgba(245, 108, 108, 0.1) !important;
    border-color: rgba(245, 108, 108, 0.4) !important;
    color: #f56c6c !important;
  }

  &.el-tag--info {
    background-color: rgba(144, 147, 153, 0.1) !important;
    border-color: rgba(144, 147, 153, 0.4) !important;
    color: #909399 !important;
  }
}

// 弹出菜单和提示样式
.el-tooltip__popper,
.el-popover {
  background-color: rgba(13, 21, 43, 0.95) !important;
  border: 1px solid rgba(0, 234, 255, 0.4) !important;
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.5) !important;
  color: #e6e6e6 !important;
  backdrop-filter: blur(10px);

  &.is-dark {
    background-color: rgba(13, 21, 43, 0.95) !important;
  }

  &[x-placement^="top"] .popper__arrow {
    border-top-color: rgba(0, 234, 255, 0.4) !important;

    &::after {
      border-top-color: rgba(13, 21, 43, 0.95) !important;
    }
  }

  &[x-placement^="bottom"] .popper__arrow {
    border-bottom-color: rgba(0, 234, 255, 0.4) !important;

    &::after {
      border-bottom-color: rgba(13, 21, 43, 0.95) !important;
    }
  }

  &[x-placement^="left"] .popper__arrow {
    border-left-color: rgba(0, 234, 255, 0.4) !important;

    &::after {
      border-left-color: rgba(13, 21, 43, 0.95) !important;
    }
  }

  &[x-placement^="right"] .popper__arrow {
    border-right-color: rgba(0, 234, 255, 0.4) !important;

    &::after {
      border-right-color: rgba(13, 21, 43, 0.95) !important;
    }
  }
}

/* 全局强制覆盖背景色样式 - 更全面的版本 */
/* 主要容器背景 */
body, html, #app, .app-wrapper {
  background-color: #0d152b !important;
  color: #e6e6e6 !important;
}

/* 保留必要的弹窗遮罩样式 */
.v-modal {
  background-color: rgba(0, 0, 0, 0.5) !important;
  z-index: 999 !important;
  pointer-events: auto !important;
  opacity: 1;
  transition: opacity 0.3s ease;
}

.v-modal[style*="display: none"] {
  opacity: 0 !important;
  pointer-events: none !important;
}



/* 确保白色背景的元素被覆盖 */
.el-table--enable-row-hover .el-table__body tr:hover > td {
  background-color: rgba(0, 234, 255, 0.1) !important;
}

.el-table__body tr.current-row > td {
  background-color: rgba(0, 234, 255, 0.2) !important;
}

/* 强制所有文本颜色 */
body, html, #app, .app-wrapper, div, p, span, h1, h2, h3, h4, h5, h6,
.el-form-item__label, .el-checkbox__label, .el-radio__label,
.el-button, .el-input__inner, .el-select-dropdown__item,
.el-dropdown-menu__item, .el-dialog__title, .el-tabs__item,
.el-pagination, .el-table th, .el-table td {
  color: #e6e6e6 !important;
}

/* 强制输入框样式 */
.el-input__inner, .el-textarea__inner {
  background-color: rgba(6, 14, 36, 0.9) !important;
  border-color: rgba(0, 234, 255, 0.4) !important;
  color: #e6e6e6 !important;
}
</style>
